<script setup lang="ts">
import type { Props } from './utils/types'

const $props = defineProps<Props>()

const $router = useRouter()

function handleJump(name: string) {
    $router.push({ name })
}

</script>

<template>
    <div class="column-nav">
        <div class="column-item" v-for="item in column" @click="handleJump(item.jumpLink)"
            :class="{ active: item.active }">{{ item.label }}</div>
    </div>
</template>

<style lang="scss" scoped>
.column-nav {
    box-sizing: border-box;
    width: 200px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
    border-radius: 15px;
    padding: 8px;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .column-item {
        text-align: center;
        padding: 10px;
        border-radius: 15px;
        color: #606266;
        cursor: pointer;
        margin-bottom: 5px;

        &:last-child {
            margin-bottom: 0;
        }

        &:hover {
            background-color: #eeeeee;
        }
    }

    .active {
        background-color: #e52129;
        color: #ffffff;
        font-family: 'SOURCEHANSANSCN-LIGHT';

        &:hover {
            background-color: #e52129;
        }
    }
}
</style>
